<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://wap.oycar.cn/static/js/jquery.1.8.3.js"></script>
    <title>面料计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .form-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .form-group {
            flex: 1;
            margin-right: 10px;
        }
        /* 最后一个 .form-group 的 margin-right 设置为0 */
        
        .form-group:last-child {
            margin-right: 0;
        }
        
        .form-control,
        #searchBox {
            width: 100%;
            padding: 6px;
            margin: 5px 0;
            font-size: 20px;
            box-sizing: border-box;
        }
        
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #f2f2f2;
            border: 1px solid #ddd;
        }
        
        .price {
            color: red;
            font-size: 20px;
            font-weight: 700;
        }
        
        .btn {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            border-radius: 10px;
        }
        
        #searchBox {
            width: auto;
        }
        
        #searchButton {
            width: 80px;
            height: 40px;
            margin: 5px 0px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 10px;
        }
        
        .result-item {
            list-style-type: none;
            border-bottom: 1px solid #ddd;
            padding: 10px;
            font-size: 14px;
        }
        /* 弹窗基础样式 */
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }
        /* 弹窗内容 */
        
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            position: relative;
            border-radius: 10px;
        }
        /* 关闭按钮 */
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        ul {
            padding-left: 0px;
        }
    </style>
</head>

<body>

    <h2>面料计算器</h2>

    <div class="form-row">
        <input type="text" id="searchBox" placeholder="搜索产品"/>
        <!-- 搜索按钮 -->
        <button id="searchButton">搜索</button>
    </div>

    <!-- 弹窗层 -->
    <div id="myModal" class="modal">
        <!-- 弹窗内容 -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="results"></div>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            选中面料：<span id="selectedFabric"></span>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="width">幅宽：</label>
            <input type="number" id="width" class="form-control">
        </div>

        <div class="form-group">
            <label for="weight">克重：</label>
            <input type="number" id="weight" class="form-control">
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="length">米数：</label>
            <input type="number" id="length" class="form-control">
        </div>

        <div class="form-group">
            <label for="tubeDiff">纸管空差：</label>
            <input type="number" id="tubeDiff" class="form-control" value="2.5">
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="salePrice">销售价格：</label>
            <input type="number" id="salePrice" class="form-control">
        </div>

        <div class="form-group">
            <label for="bulkWeight">大货重量：</label>
            <input type="number" id="bulkWeight" class="form-control" value="26">
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="purchasePrice">进货价：</label>
            <input type="number" id="purchasePrice" class="form-control">
        </div>

        <div class="form-group">
            <label for="purchaseTubeDiff">进货纸管空差：</label>
            <input type="number" id="purchaseTubeDiff" class="form-control" value="2.5">
        </div>
    </div>

    <button class="btn" id="calculate">计算</button>

    <div id="result" class="result">
        计算结果会显示在这里。
    </div>

    <script>
        $(document).ready(function() {
            // 监听幅宽和克重的输入变化
            $('#width, #weight').on('input', autoCalculateLength);

            $('input').on('focus', function() {
                // 当文本框获得焦点时自动全选其中内容
                $(this).select();
            });

            $('#calculate').click(function() {
                // 验证输入是否已填写
                var width = parseFloat($('#width').val()); // 宽度参数
                var weight = parseFloat($('#weight').val()); // 重量参数
                var length = parseFloat($('#length').val()); // 出米数
                var tubeDiff = parseFloat($('#tubeDiff').val()); // 纸管空差参数
                var salePrice = parseFloat($('#salePrice').val()); // 销售价格参数
                var bulkWeight = parseFloat($('#bulkWeight').val()); // 散装重量参数
                var purchasePrice = parseFloat($('#purchasePrice').val()); // 采购价格参数
                var purchaseTubeDiff = parseFloat($('#purchaseTubeDiff').val()); // 采购时的纸管空差参数

                // 检查所有输入框是否已填写，允许填写值为0
                if (
                    $('#width').val().trim() === '' ||
                    $('#weight').val().trim() === '' ||
                    $('#length').val().trim() === '' ||
                    $('#tubeDiff').val().trim() === '' ||
                    $('#salePrice').val().trim() === '' ||
                    $('#bulkWeight').val().trim() === '' ||
                    $('#purchasePrice').val().trim() === '' ||
                    $('#purchaseTubeDiff').val().trim() === ''
                ) {
                    alert("请填写所有必需的参数");
                    return false; // 阻止表单提交
                }

                // 执行计算
                var A = parseInt((bulkWeight - tubeDiff - 1) * length);
                var B = (((salePrice * bulkWeight) - (purchasePrice * (bulkWeight - purchaseTubeDiff))) / bulkWeight).toFixed(1);
                var C = ((salePrice * bulkWeight) / (bulkWeight * length)).toFixed(1);

                // 展示结果
                var resultString = "";
                resultString += "<p>【一卷大概出】：<text class='price'>" + A + "</text> 米</p>";
                resultString += "<p>【每公斤利润】：<text class='price'>" + B + "</text> 元</p>";
                resultString += "<p>【大货每米约】：<text class='price'>" + C + "</text> 元</p>";

                $('#result').html(resultString);

                return false; // 阻止表单提交
            });

            $('#searchButton').click(function() {
                // 获取搜索框内的文本作为关键词
                var keyword = $('#searchBox').val().trim();
                if (keyword === '') {
                    alert("请填写关键词");
                    return false;
                }
                // 发送POST请求
                $.ajax({
                    url: 'https://api.oycar.cn/app.cloth/find?ssid=1&tk=3cc73d1dbdaffa03&ver=1.0.0',
                    type: 'POST',
                    dataType: 'json',
                    data: JSON.stringify({
                        keyword: keyword,
                        limit: 15,
                        page: 1
                    }),
                    contentType: 'application/json; charset=utf-8',
                    success: function(response) {
                        // 处理返回的数据
                        var dataArray = response.data;
                        if (dataArray && dataArray.length) {
                            var resultsHtml = '<ul>';
                            $.each(dataArray, function(i, item) {
                                // 注意这里我们使用了data-*属性来存储数据
                                resultsHtml += '<li class="result-item" data-breadth="' +item.breadth+
                                '" data-square="'+item.square+
                                '" data-price="'+item.price1+
                                '" data-space="'+item.space1+
                                '" data-number="'+item.number+
                                '" data-title="'+item.title + '">【' + item.number + '】' + item.title + ' | ' + item.breadth + 'cm ' + item.breadth + 'g</li>';
                            });
                            resultsHtml += '</ul>';
                            $('#results').html(resultsHtml);
                            $('.modal').show()
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + error);
                    }
                });
            });

            // 用于关闭弹窗的函数
            $('.close').click(function() {
                $('.modal').hide(); // 隐藏弹窗
            });
        });

        function selectResult(data){
            $('#selectedFabric').html(data.number+ '#' +data.title);
            $('#width').val(data.breadth);
            $('#weight').val(data.square);
            $('#salePrice').val(data.price);
            $('#purchasePrice').val(data.space);
            autoCalculateLength();
            $('.modal').hide(); // 隐藏结果弹窗
        }

        // 输入幅宽和克重时自动计算米数
        function autoCalculateLength() {
            var width = parseFloat($('#width').val());
            var weight = parseFloat($('#weight').val());
            if (width && weight) {
                var length = 1000 / width / weight * 100;
                $('#length').val(length.toFixed(1));
            }
        }
        
        $('#searchBox').keypress(function(event) {
            if (event.which == 13) {
                $('#searchButton').click()
            }
        });

        $(document).on('click', '.result-item', function() {
            var breadth = $(this).data('breadth');
            var square = $(this).data('square');
            var price = $(this).data('price');
            var space = $(this).data('space');
            var data={
                title:$(this).data('title'),
                number:$(this).data('number'),
                breadth:$(this).data('breadth'),
                square:$(this).data('square'),
                price:$(this).data('price'),
                space:$(this).data('space')
            }
            selectResult(data);
        });
    </script>

</body>

</html>